<template>
	<Row :styleObj='{color: "#ffffff", padding: "0"}'>
		<div class="box-container">
			<div class="form">
				<input type="text" class="text" v-model="value" @nput="onInput($event)"  placeholder="添加条目" />
				<div class="button" @click="addTodoitem($event)">
					<a href="#" class="gg-math-plus" style="display: inline-block;vertical-align: text-bottom;"></a>
				</div>
			</div>
		</div>
	</Row>
</template>

<script>
import { envoke } from "@store";

export default {
	name: "todoheader",
	props:{
		uuid: {
			type: String,
			default: '',
		},
		pid:{
			type: String,
			default: '',
		}
	},
	data () {
		return {
			value: ""
		}
	},
	computed: {
		containerStyle() {
			return {
				position: 'relative'
			};
		}
	},
	methods:{
		addTodoitem(e){
			e.preventDefault();
			console.log(e)
			envoke(this.pid, 'addList', {name: this.value})
		},
		onInput(e){
			this.value = e.target.value;
		}
	},
	mounted(){
		console.log("TodoHeader mounted");
	},
	beforeDestroy(){
		console.log("TodoHeader before destroy");
	}
}
</script>
<style lang="less">
@import "@static/components/icons/plus.less";
</style>